<template>
  <!-- 首页 -->
  <el-row>
    <el-col :span="24" style="margin-top: 20px">
      <el-card
        style="
          margin-top: 20px;
          border-radius: 10px;
          background: -webkit-linear-gradient(bottom, #39c5bb21, #39c5bb)
            no-repeat;
        "
      >
        <div style="text-align: left; display: flex; align-items: center">
          <img :src="img" style="width: 40px; height: 40px" />
          <div>
            <h1 style="font-size: 20px; margin: 0px">Hi，{{ username }}</h1>
            <h1 style="font-size: 12px; margin: 0px">
              今天是“智能投”与你相遇的第1天
            </h1>
          </div>
          <i class="el-icon-view" style="margin-left: 50px"></i>
        </div>
        <div style="padding-top: 20px">
          <el-table
            :data="tabledata"
            cell-style="text-align:center;"
            header-cell-style="text-align:center"
            style="border-radius: 10px"
          >
            <el-table-column prop="name" label="总金额" width="300px">
            </el-table-column>
            <el-table-column prop="aaa" label="清仓后收益率"></el-table-column>
            <el-table-column prop="bbb" label="近一周收益率"></el-table-column>
            <el-table-column prop="ddd" label="昨日收益率"></el-table-column>
          </el-table>
        </div>
      </el-card>

      <el-card
        style="margin-top: 20px; border-radius: 10px"
        body-style="padding-top:0;"
      >
        <el-row type="flex" justify="center">
          <el-col
            :span="6"
            style="
              background-color: #39c5bb;
              border-bottom-right-radius: 30px;
              border-bottom-left-radius: 30px;
            "
          >
            <h1 style="font-size: 20px; margin: 0px">”智能投“是什么</h1>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between" style="align-items: center">
          <el-col span="8">
            <p style="font-size: 18px; margin: 0px">{{ wenzi1 }}</p>
          </el-col>
          <el-col span="6">
            <img :src="img2" style="width: 150px; height: 150px" />
          </el-col>
          <el-col span="8" type="flex" justify="space-between">
            <el-row
              type="flex"
              justify="space-between"
              style="
                dispaly: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                margin: 20px;
                justify-content: center;
              "
            >
              <div style="display: flex; align-items: center; width: 45%">
                <el-avatar
                  class="el-icon-pie-chart"
                  style="font-size: 30px; flex-shrink: 0"
                ></el-avatar>
                <div style="flex-shrink: 1">
                  <p
                    style="
                      margin: 0px;
                      font-size: 10px;
                      font-weight: bold;
                      display: flex;
                      justify-content: center;
                      flex-wrap: rap;
                      text-align: left;
                    "
                  >
                    自控风险
                  </p>
                  <p
                    style="
                      margin: 0px;
                      font-size: 10px;
                      display: flex;
                      flex-wrap: rap;
                      text-align: left;
                    "
                  >
                    用户自己调整利率和风险
                  </p>
                </div>
              </div>

              <div style="display: flex; align-items: center; width: 55%">
                <el-avatar
                  class="el-icon-cpu"
                  style="font-size: 30px; flex-shrink: 0"
                ></el-avatar>
                <div style="flex-shrink: 1">
                  <p
                    style="
                      margin: 0px;
                      font-size: 10px;
                      font-weight: bold;
                      display: flex;
                      justify-content: center;
                      flex-wrap: rap;
                      text-align: left;
                    "
                  >
                    新兴领域
                  </p>
                  <p
                    style="
                      margin: 0px;
                      font-size: 10px;
                      display: flex;
                      flex-wrap: rap;
                      text-align: left;
                    "
                  >
                    有多种新兴领域可供偏好选择
                  </p>
                </div>
              </div>
            </el-row>
            <el-row
              type="flex"
              justify="space-between"
              style="
                dispaly: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                margin: 20px;
                justify-content: center;
              "
            >
              <div style="display: flex; align-items: center; width: 45%">
                <el-avatar
                  class="el-icon-data-analysis"
                  style="font-size: 30px; flex-shrink: 0"
                ></el-avatar>
                <div style="flex-shrink: 1">
                  <p
                    style="
                      margin: 0px;
                      font-size: 10px;
                      font-weight: bold;
                      display: flex;
                      justify-content: center;
                      flex-wrap: rap;
                      text-align: left;
                    "
                  >
                    基中选优
                  </p>
                  <p
                    style="
                      margin: 0px;
                      font-size: 10px;
                      display: flex;
                      flex-wrap: rap;
                      text-align: left;
                    "
                  >
                    从市场中挑选最优方案
                  </p>
                </div>
              </div>

              <div style="display: flex; align-items: center; width: 55%">
                <el-avatar
                  class="el-icon-headset"
                  style="font-size: 30px; flex-shrink: 0"
                ></el-avatar>
                <div style="flex-shrink: 1">
                  <p
                    style="
                      margin: 0px;
                      font-size: 10px;
                      font-weight: bold;
                      display: flex;
                      justify-content: center;
                      flex-wrap: rap;
                      text-align: left;
                    "
                  >
                    个性偏好
                  </p>
                  <p
                    style="
                      margin: 0px;
                      font-size: 10px;
                      display: flex;
                      flex-wrap: rap;
                      text-align: left;
                    "
                  >
                    可根据自身喜好选择投资领域
                  </p>
                </div>
              </div>
            </el-row>
          </el-col>
        </el-row>
      </el-card>

      <el-card
        style="
          margin-top: 20px;
          border-radius: 10px;
          background: -webkit-linear-gradient(bottom, #39c5bb10, #39c5bb)
            no-repeat;
        "
        body-style="padding:0"
      >
        <div slot="header" class="clearfix" style="text-align: left">
          <span>常见问题</span>
        </div>

        <el-menu
          style="
            background: -webkit-linear-gradient(bottom, #39c5bb10, #39c5bb74)
              no-repeat;
          "
        >
          <el-menu-item
            v-for="(item, index) in questions"
            :key="index"
            @click="showAnswer(item)"
          >
            <el-row type="flex" justify="space-between">
              <div style="text-align: left">
                <i class="el-icon-chat-dot-round" style="font-size: 25px"></i>
                <span>{{ item.question }}</span>
              </div>
              <div style="text-align: right">
                <i class="el-icon-arrow-right" style="font-size: 25px"></i>
              </div>
            </el-row>
          </el-menu-item>
        </el-menu>
      </el-card>

      <el-menu
        style="
          margin-top: 20px;
          border-radius: 10px;
          background: -webkit-linear-gradient(bottom, #39c5bb40, #39c5bb)
            no-repeat;
        "
      >
        <el-menu-item @click="showProtocol" style="border-radius: 10px">
          <div class="clearfix" style="text-align: left">
            <el-row type="flex" justify="space-between">
              <span style="font-size: 18px">服务协议</span>
              <div style="text-align: right">
                <i class="el-icon-arrow-right" style="font-size: 25px"></i>
              </div>
            </el-row>
          </div>
        </el-menu-item>
      </el-menu>
    </el-col>

    <el-dialog :title="question" :visible.sync="dialogVisible" width="30%">
      <span>{{ answer }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
import img from "../assets/touxiang.jpg";
import img2 from "../assets/tubiao.png";
import { getuserAPI } from "@/api/getUserAPI";
export default {
  data() {
    return {
      // 头像
      img: img,
      // 应用logo
      img2: img2,
      // 表格数据
      tabledata: [
        {
          name: 1000.05,
          aaa: 15.43,
          bbb: 20.22,
          ddd: -2.61,
        },
      ],
      wenzi1:
        "“智能投”是国内首批获准基金投顾牌照的投资机构,专家团队为你筛选优质基金，并利用均衡分散的投资理念进行管理，帮你达成投资目标。",
      // 模态框是否可见
      dialogVisible: false,
      // 常见问题
      questions: [
        {
          question: "智能投全部转出后为什么还显示有亏损？",
          answer:
            "T日转出，一般会在T+1日进行确认，因此T日的市场涨跌会影响您的收益，另外T+1日确认当天基金公司会收取相应的基金赎回费，赎回费会从您的累计收益中扣除，因此您在T+2日看到的昨日收益为负可能是基金赎回费的影响",
        },
        {
          question: "为什么全部转出了收益率还在变化？",
          answer:
            "在您全部转出后，我们也会为您持续跟踪该方案的表现情况，目前页面展示的收益率为您清仓后方案标准组合本身的收益情况，可作为您投资的参考，但不影响您实际的资金。",
        },
        {
          question: "智能投什么时候加仓？",
          answer:
            "从历史来看，几乎没有投资者能够每一次都准确预测所谓的‘高点’或‘低点’，根据短期的波动或预测进行操作，往往会造成追涨杀跌行为。\n我们建议投资者更加关注自己的长期投资目标，同时进行分散化的投资配置以降低风险。历史经验表明，秉持长期投资的耐性并维持一个分散化的组合，靠投资的复利效果以富平短期市场的波动。因此您可以考虑据自己的长期投资目标来制定加仓计划，例如最常见的就是定时分批投入",
        },
      ],
      question: "提示",
      answer: "这是一段信息",
      protocol: "服务协议",
      username: "",
    };
  },
  methods: {
    // 回答常见问题
    showAnswer(item) {
      this.question = item.question;
      this.answer = item.answer;
      this.dialogVisible = true;
    },
    // 展示服务协议
    showProtocol() {
      this.question = "服务协议";
      this.answer = this.protocol;
      this.dialogVisible = true;
    },
    async getusername() {
      const { data: res } = await getuserAPI(this.$route.query.user_id);
      if (res.flag) {
        var list = this.$jsonToObj(res);
        var user = list[0];
        this.username = user.user_real_name;
      }
    },
  },

  created() {
    this.getusername();
  },
};
</script>

<style scoped>
.el-table .num {
  background-color: blue;
}
.p {
  word-break: break-all;
  word-wrap: break-word;
}
</style>
